import dash
import numpy as np
from dash import html, Input, Output, dcc, ALL
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        # 存储器
        dcc.Store(id='store'),

        # 轮训器
        dcc.Interval(
            id='interval',
            n_intervals=0,
            interval=2000
        ),

        # 示例指标卡
        fac.AntdRow(
            [
                fac.AntdCol(
                    html.Div(
                        id={
                            'type': 'value-box',
                            'index': i
                        },
                        style={
                            'background': 'white',
                            'height': '100%',
                            'justifyContent': 'center',
                            'alignItems': 'center',
                            'display': 'flex'
                        }
                    ),
                    span=6,
                    style={
                        'height': '100px',
                        'padding': '3px',
                        'background': '#f0f3f8'
                    }

                )
                for i in range(16)
            ]
        )
    ],
    style={
        'padding': '100px'
    }
)


@app.callback(
    Output('store', 'data'),
    Input('interval', 'n_intervals')
)
def update_data_store(_):
    # 模拟数据变化
    return np.random.rand(16).round(2).tolist()


@app.callback(
    Output(
        {
            'type': 'value-box',
            'index': ALL
        },
        'children'
    ),
    Input('store', 'data')
)
def data_store_to_box_value(data):
    return data


if __name__ == '__main__':
    app.run(debug=True)
